<!-- 图片详情页 -->
<template>
  <div id="pictureDetailPage">

    <a-row :gutter="[16, 16]">
      <!-- 图片展示区 -->
      <a-col :sm="24" :md="16" :xl="18">
        <a-card title="图片预览">
          <a-image
            style="max-height: 600px; object-fit: contain"
            :src="picture.url"
          />
        </a-card>
      </a-col>
      <!-- 图片信息区 -->
      <a-col :sm="24" :md="8" :xl="6">
        <a-card title="图片信息">
          <a-descriptions :column="1">
            <a-descriptions-item label="作者">
              <a-space>
                <a-avatar :size="24" :src="picture.user?.userAvatar" />
                <div>{{ picture.user?.userName }}</div>
              </a-space>
            </a-descriptions-item>
            <a-descriptions-item label="名称">
              {{ picture.name ?? '未命名' }}
            </a-descriptions-item>
            <a-descriptions-item label="简介">
              {{ picture.introduction ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="分类">
              {{ picture.category ?? '默认' }}
            </a-descriptions-item>
            <a-descriptions-item label="标签">
              <a-tag v-for="tag in picture.tags" :key="tag">
                {{ tag }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="格式">
              {{ picture.picFormat ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽度">
              {{ picture.picWidth ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="高度">
              {{ picture.picHeight ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽高比">
              {{ picture.picScale ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="大小">
              {{ formatSize(picture.picSize) }}
            </a-descriptions-item>
          </a-descriptions>
          <!-- 图片操作 -->
          <a-space wrap>
            <a-button type="primary" @click="doDownload">
              免费下载
              <template #icon>
                <DownloadOutlined />
              </template>
            </a-button>
            <a-button :icon="h(EditOutlined)" v-if="canEdit" type="default" @click="doEdit">
              编辑
<!--              <template #icon><EditOutlined /></template>-->
            </a-button>
            <a-button :icon="h(DeleteOutlined)" v-if="canEdit" danger @click="doDelete">
              删除
<!--              <template #icon><DeleteOutlined /></template>-->
            </a-button>
          </a-space>
        </a-card>
      </a-col>
    </a-row>

  </div>
</template>
<script lang="ts" setup>

import {EditOutlined, DeleteOutlined,DownloadOutlined} from "@ant-design/icons-vue";
import {onMounted, ref, defineProps, computed,h} from "vue";
import {deletePictureUsingPost, getPictureVoByIdUsingGet} from "@/api/fileController";
import {message} from "ant-design-vue";
import {downloadImage, formatSize} from "@/utils";
import {useLoginUserStore} from "@/stores/useLoginUserStore";
import router from "@/router";


const props = defineProps<{ id: string | number }>()
const picture = ref<API.PictureVO>({})

//获取图片详情
const fetchPictureDetail = async()=>{
  try {
    const res = await getPictureVoByIdUsingGet({
      id: props.id,
    })
    if (res.data.code === 0 && res.data.data){
      picture.value = res.data.data
    }else {
      message.error('获取图片详情失败，'+ res.data.message)
    }
  }catch (e:any){
    message.error('获取图片详情失败，'+ e.message)
  }
}
//获取登录用户信息
const loginUserStore = useLoginUserStore()
//是否具有编辑权限
const canEdit = computed(()=>{
  const loginUser = loginUserStore.loginUser;
  //未登录不可编辑
  if(!loginUser.id){
    return false;
  }
  //仅本人或管理员可编辑
  const user = picture.value.user || {}
  return  loginUser.id === user.id || loginUser.userRole === 'admin'
})

// 编辑
const doEdit = () => {
  router.push('/add_picture?id=' + picture.value.id)
}
// 删除
const doDelete = async () => {
  const id = picture.value.id
  if (!id) {
    return
  }
  const res = await deletePictureUsingPost({ id })
  if (res.data.code === 0) {
    message.success('删除成功')
    // 删除成功后跳转到首页
    router.push('/')
  } else {
    message.error('删除失败')
  }
}

// 处理下载
const doDownload = () => {
  downloadImage(picture.value.url)
}

onMounted(()=>{
  fetchPictureDetail();
})
</script>
<style scoped>
#pictureDetailPage {

}
</style>
